<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue'

const str = ref('张三')
const num = ref(88)
// 侦听单个属性的变化:  使用侦听器,侦听两个属性的变化
/* watch(str, (newVal) => {
  console.log(newVal)
})
watch(num, (newVal) => {
  console.log(newVal)
}) */
// 使用侦听器侦听多个属性的变化
/* watch([str, num], (newVals) => {
  console.log(newVals)
}) */

// 侦听器有一个问题, 是惰性的 (如果不主动去 设置immediate: 不会主动侦听一次的)
// 在vue3中新增了一个方法, watchEffect 很主动
watchEffect(() => {
  // 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行
  console.log(num.value, str.value)
})
</script>
<template>
  <div>{{ str }} <button @click="str += '疯'">改str</button></div>
  <div>{{ num }} <button @click="num++">改num</button></div>
</template>

<style scoped></style>
